<template>
  <div class="app-container AImodel-manage">
    <!-- 搜索 -->
    <el-form :model="state.queryParams" ref="queryRef" :inline="true">
      <el-form-item label="模型套餐名称" prop="aimodeltcname">
        <el-input v-model="state.queryParams.aimodeltcname" placeholder="模型套餐名称" clearable
          @keyup.enter="handleQuery({ initPageIndex: true })" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery({ initPageIndex: true })">搜索</el-button>
        <el-button type="primary" icon="Plus" plain @click="aimodeltcEditRef.openDialog()">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table v-loading="state.tableLoading" :data="state.tableData" row-key="id" style="flex:1;">
      <el-table-column prop="aimodeltcid" label="模型套餐id" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcname" label="模型套餐名称" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcmodelname" label="套餐模型名称" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcdzprice" label="定制价格" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcyzprice" label="月租价格" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcnumprice" label="单条价格" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcmaxtoken" label="最大token数" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcaikeyid" label="关联key流水号" min-width="150"></el-table-column>
      <el-table-column prop="aimodeltciscontextnum" label="上下文限制数" min-width="150"
        show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltctemperature" label="回答相关性" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcstatus" label="是否可用" min-width="150" show-overflow-tooltip>
        <template #default="scope">
          <el-switch v-model="scope.row[scope.column.property]" inline-prompt :active-value="1" :inactive-value="0"
            active-text="是" inactive-text="否" :loading="scope.row.loading"
            @change="availableChange(scope.row, $event)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="aimodeltcfirstmfwjsize" label="首次免费文件大小" min-width="150"
        show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcwjmaxsize" label="最大文件大小限制" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcwztwmaxlen" label="单次最大投喂字数" min-width="150"
        show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcwztwjl" label="文字投喂计量" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcwztwprice" label="文字投喂价格" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcwzccjl" label="文字擦除计量" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcwzccprice" label="文字擦除价格" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcwjtwjl" label="文件投喂计量" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcwjtwprice" label="文件投喂价格" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcwjccjl" label="文件擦除计量" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcwjccprice" label="文件擦除价格" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcisassistantsstatus" label="助手是否启用" min-width="150"
        show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltcisassistantsid" label="关联助手id" min-width="150"
        show-overflow-tooltip></el-table-column>
      <el-table-column prop="aimodeltccreatedate" label="创建时间" min-width="150" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" :width="fitWidth" class-name="small-padding fixed-width" fixed="right">
        <template #default="scope">
          <div class="operation-box">
            <el-text class="operate-btn-item" type="primary" @click="aimodeltcEditRef.openDialog(scope.row)">编辑</el-text>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-box">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="paginaionConfig.query.pageindex" :page-sizes="paginaionConfig.sizeOptions"
        :page-size="paginaionConfig.query.rows" layout="total, sizes, prev, pager, next, jumper"
        :total="paginaionConfig.total">
      </el-pagination>
    </div>

    <AImodeltcEdit width="70%" ref="aimodeltcEditRef" @refresh="handleQuery" />
  </div>
</template>

<script setup name="AImodeltc">
import useAImodeltcManageStore from '@store/modules/aimodeltcManage'
import AImodeltcEdit from './components/AImodeltcEdit/index.vue'
import _ from 'lodash'
import usePagination from '@/hooks/usePagination'
import useFitColumn from '@/hooks/useFitColumn'

const { proxy } = getCurrentInstance()
const aimodeltcManageStore = useAImodeltcManageStore()
const { paginaionConfig, handleSizeChange, handleCurrentChange } = usePagination(handleQuery)
const { fitWidth } = useFitColumn()

const state = reactive({
  tableLoading: false,
  tableData: [],
  queryParams: {
    aimodeltcname: ''
  },
})
const aimodeltcEditRef = ref(null)

/** 查询菜单列表 */
const getList = async (query) => {
  state.tableLoading = true
  const { Total, Data } = await aimodeltcManageStore.list(query)
  paginaionConfig.total = Total
  state.tableData = Data

  state.tableLoading = false
}

function handleQuery(config) {
  if (config?.initPageIndex) paginaionConfig.query.pageindex = 1
  getList(Object.assign(_.cloneDeep(paginaionConfig.query), state.queryParams))
}

const availableChange = async (row, newVal) => {
  row.loading = true
  try {
    // await aimodeltcManageStore.sysuserUp({ account: row.account, available: newVal })
    // row.loading = false
    // proxy.$modal.msgSuccess('操作成功！')
  } catch (error) {
    handleQuery()
  }
}

onMounted(() => {
  handleQuery({ initPageIndex: true })
})
</script>
